
<template>
  <div class="music-list" ref="musicList">
    <nav-bar class='music-nav'>
      <div class="back" slot="left" @click='goBack'>
        <i class="icon-back"></i>
      </div>
      <div slot="center" class='nav-title'>{{title}}</div>
    </nav-bar>
    <div class="bg-image" :style="bgStyle" ref="bgImageRef">
      <div class='play-all' v-show='songs.length' ref="playBtn">
        <i class='icon-play'></i>
        <span>随机播放全部</span>
      </div>
    </div>
    <div class='layer' ref="layerRef">

    </div>
    <scroll :list='songs' class='content' ref="scrollRef" :probe-type='3' :listen-scroll='true' @scroll='contentScroll'>
      <div>
        <music-item :songs='songs' />
      </div>
    </scroll>
  </div>
</template>

<script>
import NavBar from 'components/common/navbar'

import MusicItem from './MusicItem'
import Scroll from 'components/base/Scroll'

import { playListMixin } from 'common/js/mixin'
import { prefixStyle } from 'common/js/dom.js'
const transform = prefixStyle('transform')
export default {
  components: { NavBar, Scroll, MusicItem },
  mixins: [playListMixin],
  name: 'musicList',
  props: {
    title: {
      type: String,
      default: ''
    },
    bgImage: {
      type: String,
      default: ''
    },
    songs: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      scrollY: 0,
      imgHeight: 0,
      minTransformY: 0
    }
  },
  computed: {
    bgStyle() {
      return `background-image:url(${this.bgImage})`
    }
  },

  methods: {
    handlePlayList(playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''
      this.$refs.musicList.style.bottom = bottom
      this.$refs.scrollRef.refresh()
    },
    goBack() {
      this.$router.back()
    },
    contentScroll(pos) {
      this.scrollY = pos.y
    }
  },
  deactivated() {
    this.$refs.bgImageRef.style.height = '300px'
  },
  mounted() {
    this.imgHeight = this.$refs.bgImageRef.clientHeight
    this.minTransformY = -this.imgHeight + 40
    this.$refs.scrollRef.$el.style.top = this.imgHeight + 'px'
  },
  watch: {
    scrollY(val) {
      let transformY = Math.max(this.minTransformY, val)
      let scale = 0
      let zIndex = 0
      const percent = Math.abs(val / this.imgHeight)
      if (val > 0) {
        zIndex = 10
        scale = 1 + percent
        this.$refs.bgImageRef.style[transform] = `scale(${scale})`
      }
      this.$refs.layerRef.style[transform] = `translateY(${transformY}px)`
      if (val < this.minTransformY) {
        zIndex = 10
        this.$refs.bgImageRef.style.height = '0px'
        this.$refs.bgImageRef.style.paddingTop = '40px'
        this.$refs.playBtn.style.display = 'none'
      } else {
        this.$refs.bgImageRef.style.height = '300px'
        this.$refs.bgImageRef.style.paddingTop = '0px'
        this.$refs.playBtn.style.display = ''
      }
      this.$refs.bgImageRef.style.zIndex = zIndex
    },
    playlist(list) {
      if (list.length) {
        this.handlePlaylist(list)
      }
    }
  }
}
</script>

<style scoped>
.music-list {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #222;
}
.music-list .bg-image {
  position: relative;
  height: 300px;
  background-size: cover;
}
.nav-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.play-all {
  position: absolute;
  transform: translateX(-50%);
  width: 130px;
  bottom: 30px;
  text-align: center;
  left: 50%;
  line-height: 40px;
  border: 1px solid var(--color-theme);
  border-radius: 40px;
  /* padding: 0 20px; */
  color: var(--color-theme);
  font-size: 14px;
}
.play-all span {
  margin-left: 5px;
}
.music-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.layer {
  position: relative;
  height: 100%;
  background-color: #222;
}
.music-list .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>